<template>
  <el-card>
    <div slot="header" class="clearfix">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="角色名" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="roleList" border style="width: 100%">
      <el-table-column prop="roleId" label="角色编号"> </el-table-column>
      <el-table-column prop="roleName" label="角色名称"> </el-table-column>

      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-menu"
            @click="assignPermission(scope.row.roleId)"
            >分配权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="权限分配" :visible.sync="dialog.roleVisible">
      <el-form>
        <el-form-item label="活动名称" label-width="250px">
          <el-tree
            ref="tree"
            :data="treeNodes"
            show-checkbox
            :check-strictly="true"
            node-key="menuId"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="defaultChecked"
            :props="defaultProps"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.roleVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePermission()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      dialog: {
        roleVisible: false,
      },
      roleList: [],
      editRole: {
        roleId: 0,
      },
      treeNodes: [], //所有权限
      defaultChecked: [], //当前角色拥有权限
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("roles")
        .then((res) => {
          if (res.data.code == 200) {
            this.roleList = res.data.data.list;
          }
        })
        .catch((error) => {
          this.$message.error("出错了");
        });
    },
    assignPermission(rid) {
      this.editRole.roleId = rid;
      this.loadPermission();
      this.dialog.roleVisible = true;
    },
    loadPermission() {
      this.$axios
        .get("roles/queryMenuByRole/" + this.editRole.roleId)
        .then((res) => {
          this.treeNodes = res.data.data.treeNodes;
          this.defaultChecked = res.data.data.defaultChecked;
        });
    },
    savePermission() {
      this.dialog.roleVisible = false;
      let checkedNodes = this.$refs.tree.getCheckedKeys();
      this.$axios
        .put("roles/insertRoleMenu", {
          roleId: this.editRole.roleId,
          menuIds: checkedNodes,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>

